// /*
//  * Copyright 2019 the original author or authors.
//  *
//  * Licensed under the Apache License, Version 2.0 (the "License");
//  * you may not use this file except in compliance with the License.
//  * You may obtain a copy of the License at
//  *
//  *      http://www.apache.org/licenses/LICENSE-2.0
//  *
//  * Unless required by applicable law or agreed to in writing, software
//  * distributed under the License is distributed on an "AS IS" BASIS,
//  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//  * See the License for the specific language governing permissions and
//  * limitations under the License.
//  */
//
//
// import { cart, order, security, store } from "@mall/api-services"
// import { Flex, WhiteSpace } from "antd-mobile"
// import classNames from "classnames"
// import * as _ from "lodash"
// import { observer } from "mobx-react"
// import * as React from "react"
// import { RouteComponentProps, withRouter } from "react-router"
// import InputNumber from "../components/product/InputNumber"
// import ProductPrice from "../components/product/product-price"
// import Icon from "../icon"
// import { FILL_ORDERS_NAME, storageClient } from "../storage"
// import "./index.scss"
// import { ChangePurchaseQuantity, SelectedOptions } from "./state"
//
// export enum SelectOptionsDrawerAction {
//   ADD_TO_CART, PLACE_ORDER
// }
//
//
// interface SelectOptionsDrawerProps extends RouteComponentProps {
//   product: store.Product;
//   selectedOptions: SelectedOptions;
//   purchaseQuantity: ChangePurchaseQuantity;
//   onCloseDrawer?: () => void;
//   actions: SelectOptionsDrawerAction[];
// }
//
// @observer
// class SelectOptionsDrawerComponent extends React.Component<SelectOptionsDrawerProps> {
//
//   constructor(props: Readonly<SelectOptionsDrawerProps>) {
//     super(props)
//     this.state = {}
//
//     this.handleAddToCart = this.handleAddToCart.bind(this)
//     this.handleBuyNow = this.handleBuyNow.bind(this)
//     this.closeCloseDrawer = this.closeCloseDrawer.bind(this)
//   }
//
//   public render() {
//     const { product, purchaseQuantity, actions } = this.props
//     const { options } = product
//     const variant = this.getVariant()
//     const imageUrl = this.getProductVariantFirstImageUrl()
//     return (
//       <div className="product-page-options-drawer">
//         <div className="product-page-options-drawer-top">
//           <div className="product-page-drawer-close" onClick={this.closeCloseDrawer}>
//             <Icon type="close" size="xxs"/>
//           </div>
//           <div className="product-page-options-drawer-title">
//             <img className="product-page-options-drawer-image" src={imageUrl} alt=""/>
//             <div className="product-page-options-drawer-price">
//               <ProductPrice price={variant.price} size={18}/>
//               <div style={{ fontSize: "12px" }}>库存:{this.renderVariantInventoryQuantity()}</div>
//               <div style={{ fontSize: "12px" }}>编号:{this.renderVariantId()}</div>
//             </div>
//           </div>
//           <div className="product-page-options-drawer-content">
//             <WhiteSpace size="xl"/>
//             {_.map(options, option => this.renderOption(option))}
//             <div style={{ height: "26px" }}>
//               <span className="product-list-item-label">数量</span>
//               <InputNumber min={1} max={99999} value={purchaseQuantity.quantity}
//                            onChange={value => purchaseQuantity.changeQuantity(value)}
//                            style={{ float: "right" }}/>
//             </div>
//             <WhiteSpace/>
//           </div>
//         </div>
//         <div className="product-page-options-drawer-actions">
//           {_.includes(actions, SelectOptionsDrawerAction.ADD_TO_CART) &&
//           <div className={classNames("product-button-action", "add-to-shopping-cart-button")}
//                onClick={this.handleAddToCart}>
//             加入购物车
//           </div>}
//           {_.includes(actions, SelectOptionsDrawerAction.PLACE_ORDER) &&
//           <div className={classNames("product-button-action", "buy-button")}
//                onClick={this.handleBuyNow}>
//             立即购买
//           </div>}
//
//         </div>
//       </div>
//     )
//   }
//
//   private getProductVariantFirstImageUrl(): string {
//     const variant = this.getVariant()
//     return variant.imageUrls[0]
//   }
//
//   private getVariant() {
//     const { product, selectedOptions } = this.props
//     return product.getVariantByOptions(selectedOptions.options)
//   }
//
//   private renderVariantId() {
//     return this.getVariant().id
//   }
//
//   private renderVariantInventoryQuantity() {
//     return this.getVariant().inventoryQuantity
//   }
//
//   private renderOption(option: store.ProductOption) {
//     const { selectedOptions } = this.props
//     const { options } = selectedOptions
//     if (option.values === undefined) {
//       return undefined
//     }
//     const position = option.position === undefined ? "" : option.position
//     return (
//       <div key={position}>
//         <div className="product-list-item-label">{option.name}</div>
//         <WhiteSpace size="xl"/>
//         <Flex wrap="wrap" align="start" justify="start" alignContent="start">
//           {option.values.map(item =>
//             <Flex.Item key={item.position} style={{ flex: "initial" }}>
//               <button className={classNames({
//                 "product-unselected-button": options[position] !== item.value,
//                 "product-selected-button": options[position] === item.value,
//               })} onClick={() => {
//                 options[position] = item.value
//                 selectedOptions.changeOptions(options)
//               }}>{item.value}</button>
//             </Flex.Item>,
//           )}
//         </Flex>
//         <WhiteSpace size="xl"/>
//       </div>
//     )
//   }
//
//   private handleAddToCart() {
//     const { product, purchaseQuantity } = this.props
//     const item = new cart.CartItem()
//     item.productId = product.id
//     item.variantId = this.getVariant().id
//     item.storeId = product.storeId
//     item.quantity = purchaseQuantity.quantity
//     cart.CartServiceV1
//       .addCartItem(security.SecurityUserHolder.getUserId(), item)
//       .then(() => this.closeCloseDrawer())
//   }
//
//   private handleBuyNow() {
//     const { product, purchaseQuantity } = this.props
//     const variant = this.getVariant()
//     const newOrder = new order.Order()
//     const item = new order.OrderItem()
//     item.productId = product.id
//     item.storeId = product.storeId
//     item.variantId = variant.id
//     item.quantity = purchaseQuantity.quantity
//     item.price = variant.price
//     item.optionValues = _.join(variant.optionValues, ",")
//     item.title = product.name
//     item.imageUrl = this.getProductVariantFirstImageUrl()
//     newOrder.items = [item]
//     storageClient.set(FILL_ORDERS_NAME, [newOrder])
//     this.props.history.push("/orders/fill")
//   }
//
//   private closeCloseDrawer() {
//     const { onCloseDrawer } = this.props
//     if (_.isFunction(onCloseDrawer)) {
//       onCloseDrawer()
//     }
//   }
// }
//
// export const SelectOptionsDrawer = withRouter(SelectOptionsDrawerComponent)

export const a = ""
